<template>
	<div class="map-box">
		<div ref="map" class="map"></div>
	</div>
</template>

<script>
import * as THREE from 'three';
import { Detector } from '@/utils/detector';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import gsap from 'gsap'; // 导入动画库

let camera = null; // 相机
let scene = null; // 场景
let renderer = null; // 渲染
let controls = null;
// let state = new State(); // 帧率检测
let width = 0;
let height = 0;
let material = null;
// let raycaster = null; // 鼠标移入监听
// let s = 8; //三维场景显示范围控制系数，系数越大，显示的范围越大，看到的东西越小

let textureLoader = null;
let scene1_material = null;
let scene1 = null;
let geometry = null;
let mesh = null;

export default {
	name: 'Index',
	mounted() {
		this.init();
	},
	methods: {
		// 换色
		click(color) {
			material.color.set(color);
		},
		init() {
			if (!Detector.webgl) return Detector.addGetWebGLMessage(), alert('不支持webgl');
			width = this.$refs.map.offsetWidth; // 获取显示宽度和高度
			height = this.$refs.map.offsetHeight;
			scene = new THREE.Scene(); // 建立场景
			this.initScene();
			this.initRenderer();
			this.initControls();
			this.initHouse();
			this.render();
		},
		initHouse() {
			textureLoader = new THREE.TextureLoader();
			geometry = new THREE.SphereGeometry(300, 100, 100);
			scene1_material = textureLoader.load(require('@/assets/img/sc1.jpg'));
			scene1 = new THREE.MeshBasicMaterial({
				map: scene1_material,
				side: THREE.DoubleSide
			});
			mesh = new THREE.Mesh(geometry, scene1);
			mesh.rotation.y -= 0.5;
			scene.add(mesh); //添加到场景
		},
		// 设置动画
		animation() {
			// let obj = {
			//   ...camera.position,
			// }
			let position = camera.position;
			// let animate1 =''
			gsap.to(position, {
				// x: 15,
				y: -5,
				// z: 20,
				duration: 5,
				// repeat: -1, // 重复次数 无限循环-1
				// yoyo: true, // 往返运动
				// delay: 2, // 延迟时间
				ease: 'power1.inOut', // 动画类型
				onComplete: () => {
					// 动画完成回调
					console.log('动画完成');
				},
				onStart: () => {
					// 动画开始回调
					console.log('动画开始');
				}
			});
		},
		// 光线
		initLight() {
			// 环境光
			let light = new THREE.AmbientLight(0xffffff);
			scene.add(light);
		},
		// 相机
		initScene() {
			// 相机设置
			let k = width / height; //窗口宽高比
			//创建相机对象（透视相机） - 相机可以缩放显示三维场景、对三维场景的不同角度进行取景显示。
			camera = new THREE.PerspectiveCamera(60, k, 0.01, 10000);
			camera.position.set(0.1, 0, 0);
			camera.target = new THREE.Vector3(0, 0, 0);
		},
		// 渲染器
		initRenderer() {
			renderer = new THREE.WebGLRenderer({
				alpha: true,
				antialias: true
				// logarithmicDepthBuffer: true,
			});
			renderer.setSize(width, height); //设置渲染区域尺寸
			// renderer.setClearColor('#fff', 1); //设置背景颜色
			renderer.setClearAlpha(1); // 背景透明度
			renderer.render(scene, camera);
			renderer.clear(); // 此方法将颜色缓存初始化为当前颜色
			renderer.shadowMap.enabled = true; // 可以渲染阴影
			renderer.getPixelRatio(Math.min(window.devicePixelRatio, 2)); // 设置像素比
			renderer.outputEncoding = THREE.sRGBEncoding;
			this.$refs.map.appendChild(renderer.domElement);
			// document.body.append(state.domElement);
		},
		// 鼠标控制 - controls
		initControls() {
			// 控制器 放大倍数  缩小倍数  是否自动旋转及速度
			controls = new OrbitControls(camera, renderer.domElement);
			controls.target.set(0, 0, 0);
			controls.enableDamping = true; // 阻尼
			controls.dampingFactor = 0.5; // 阻尼系数大小控制
			controls.enablePan = true; // 是否开启右键拖拽功能
			controls.maxPolarAngle = (Math.PI * 3) / 5; // 最大视角
			controls.minPolarAngle = Math.PI / 3; // 最小视角
			controls.enableZoom = true; // 是否可以缩放
			controls.autoRotate = false; // 是否自动旋转
			// controls.autoRotateSpeed = 0.3 // 旋转速度控制
			// controls.minDistance = 1; // 相机距离原点的最近距离
			// controls.maxDistance = 400; // 相机距离原点的最远距离
		},
		// 动画
		render() {
			renderer.render(scene, camera); // 整体渲染
			controls.update();
			requestAnimationFrame(this.render); //请求再次执行渲染函数render
		}
	}
};
</script>

<style lang="scss" scoped>
.map-box {
	width: 100%;
	height: 100%;
	position: relative;
	.map {
		width: 100%;
		height: 100%;
	}
}
</style>
